<template>
    <el-container id="mposwidget" class="mev-div-border" style="width: 250px;position: fixed;top: 100px;">
        <el-header style="height: 15px;">
            <el-row>
                <el-col :span="8" style="text-align: left;">
                    GPS
                </el-col>
                <el-col :span="16" style="text-align: right;">
                    <i @click="close()" size="medium" class="el-icon-close"></i>
                </el-col>
            </el-row>
        </el-header>
        <el-main>

            <el-row>
                <el-col :span="8"> 经度 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_lon" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> 维度 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_lat" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> 高度 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_height" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> X </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_x" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> Y </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_y" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> Z </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_z" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> 偏航 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_heading" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> 俯仰 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_pitch" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"> 滚动 </el-col>
                <el-col :span="16" >
                    <el-input size="mini" v-model="vp_roll" type="number" ></el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="24" >
                    <el-input size="mini" v-model="vp_json" ></el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-button @click="clickfunJson" size="mini">JSON</el-button>
                <el-button @click="clickfun" size="mini">LLH</el-button>
                <el-button @click="clickfunXYZ" size="mini">XYZ</el-button>
            </el-row>
            <el-row>
                <el-button @click="getCameraPos" size="mini">GET</el-button>
                <el-button @click="saveCameraPos" size="mini">SAVE</el-button>
            </el-row>
            <el-row>
                <el-button @click="captureImage" size="mini">图片</el-button>
                <el-button @click="captureDepthImage" size="mini">深度</el-button>
                <el-button @click="captureDepthText" size="mini">坐标</el-button>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    import MPos from "./MPos";

    export default {
        name: "MPosWidget",
        data() {
            return {
                vp_lon: 113.567295,
                vp_lat: 34.812179,
                vp_height: 79.348984,
                vp_x:-2096164.8684110371,
                vp_y:4805369.761587891,
                vp_z:3620763.961749195,
                vp_heading:12.559277,
                vp_pitch:7.296824,
                vp_roll:-0.448677,
                vp_json:""
            };
        },
        mounted(){
            console.log("aaaaaa");
        },
        methods:{
            clickfun() {
                MPos.setVP({
                    lon:this.vp_lon,
                    lat:this.vp_lat,
                    height:this.vp_height,
                    heading:this.vp_heading,
                    pitch:this.vp_pitch,
                    roll:this.vp_roll
                });
            },
            clickfunXYZ(){
                MPos.setVPXYZ({
                    x:this.vp_x,
                    y:this.vp_y,
                    z:this.vp_z,
                    heading:this.vp_heading,
                    pitch:this.vp_pitch,
                    roll:this.vp_roll
                });
            },
            clickfunJson(){
                var vp =JSON.parse(this.vp_json);
                if(vp.lon > 1){
                    MPos.setVP({
                        lon:vp.lon,
                        lat:vp.lat,
                        height:vp.height,
                        heading:vp.heading,
                        pitch:vp.pitch,
                        roll:vp.roll
                    });
                }else{
                    MPos.setVPXYZ({
                        x:vp.x,
                        y:vp.y,
                        z:vp.z,
                        heading:vp.heading,
                        pitch:vp.pitch,
                        roll:vp.roll
                    });
                }

            },
            getCameraPos(){
                let vp = MPos.getVP();
                this.vp_x = vp.pos.x;
                this.vp_y = vp.pos.y;
                this.vp_z = vp.pos.z;
                this.vp_heading = Cesium.Math.toDegrees(vp.heading);
                this.vp_pitch = Cesium.Math.toDegrees(vp.pitch);
                this.vp_roll = Cesium.Math.toDegrees(vp.roll);
                this.vp_lon = Cesium.Math.toDegrees(vp.posCart.longitude);
                this.vp_lat = Cesium.Math.toDegrees(vp.posCart.latitude);
                this.vp_height = vp.posCart.height;
            },
            captureImage(){
                MPos.capturePicture();
                window.lastViewMatrix = new Cesium.Matrix4();
                Cesium.Matrix4.clone(window.cesiumViewer.camera.viewMatrix,window.lastViewMatrix);
            },
            captureDepthImage(){
                MPos.captureDepthImage();
            },
            captureDepthText(){
                MPos.captureDepth();
            },
            saveCameraPos(){
                let data = {
                    lon:this.vp_lon,
                    lat:this.vp_lat,
                    height:this.vp_height,
                    x:this.vp_x,
                    y:this.vp_y,
                    z:this.vp_z,
                    heading:this.vp_heading,
                    pitch:this.vp_pitch,
                    roll:this.vp_roll,
                }
                var jsontext=JSON.stringify(data);
                MPos.download("pos.txt",jsontext);
            }
        }
    }
</script>

<style scoped>

</style>